<template>
  <div class="itemThree">
    <h5>物资统计(单位:份)</h5>
    <div id="myEcharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, reactive } from 'vue';
import { itemThree } from '../../../api/echart'
export default {
  name: 'Itemthree',
  setup() {

    let data = reactive({})

    async function getState() {
      data = await itemThree()
      console.log(data)

      let mycharts = echarts.init(document.getElementById('myEcharts'))
      mycharts.setOption({
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'cross',
            label: {
              backgroundColor: '#e6b600'
            }
          }
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            data: data,
            radius: [10, 100],
            center: ['50%', '45%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 10
            },
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          }
        ]
      })
    }

    onMounted(() => {
      getState()
    })

    return {
      getState, data
    }
  }
}
</script>

<style scoped>
#myEcharts {
  width: 330px;
  height: 280px;
  margin-left: 10px;
  margin-top: -34px;
}

h5 {
  text-align: center;
  color: #fff;
  margin-top: 0px;
}
</style>
